<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.msg-item {
				padding: 8px;
				clear: both;
			}
			
			.msg-item .mui-item-clear {
				clear: both;
			}
			
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img {
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
		</style>
	</head>

	<body>
		<div class="msg-item " msg-type="text" msg-content="Hi，欢迎来到交流群，请文明发言！">

			<img class="msg-user-img" src="/userfiles/images/class-group.png" alt="">

			<div>
				<div class="sender-name"></div>

				<div class="msg-content">
					<div class="msg-content-inner">

						Hi，欢迎来到交流群，请文明发言！

					</div> 
					<div class="msg-content-arrow"></div>
				</div>
				<div class="mui-item-clear"></div>
			</div>
 
		</div>

		<div class="msg-item  msg-item-self" msg-type="text" msg-content="水电费水电费">

			<!--<i class="msg-user mui-icon mui-icon-person"></i>-->
			<img class="msg-user msg-user-img" src="/backend/photo/default/xuesheng.png" width="32">

			<div class="msg-content">
				<div class="msg-content-inner">

					水电费水电费

				</div>
				<div class="msg-content-arrow"></div>
			</div>
			<div class="mui-item-clear"></div>

		</div>
	</body>

</html>